<template>
    <div class="searchContainer">
        <span class="inputLabel">路由文根</span>
        <el-input v-model="routeRootPathSearchData.routeRootPath" placeholder="路由文根" class="searchInfoInput"></el-input>

        <span class="inputLabel">路由文根名称</span>
        <el-input v-model="routeRootPathSearchData.routeRootName" placeholder="路由文根名称" class="searchInfoInput"></el-input>

        <span class="inputLabel">关联组件</span>
        <el-select v-model="routeRootPathSearchData.componentId" placeholder="关联组件" class="searchInfoInput" clearable>
            <el-option :label="item.componentCnName" :value="item.id" v-for="item in componentList" :key="item.id"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryComponentInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script setup name="RouteRootPathSearch" lang="ts">
import {routeRootPathInfoQuery} from "@/request/routeRootPath";
import {componentInfoQueryNoContent} from "@/request/components";
import {computed, ref} from "vue";
import {useRouteRootStore} from "@/stores/menu/routeRootPath";

let componentList = ref([]);
let searchLoading = ref(false);

let routeRootPathSearchData = computed(() => {
    return useRouteRootStore().routeRootPathSearchData;
})

// 查询组件列表
let param = {
    pageInfo: {
        pageIndex: 1,
        pageSize: 10000
    },
    componentType: "CUSTOM"
}
componentInfoQueryNoContent(param).then(res => {
    componentList.value = res.data["dataList"];
})

function queryComponentInfo() {
    searchLoading.value = true
    routeRootPathInfoQuery(routeRootPathSearchData.value).then(res => {
        useRouteRootStore().resetRouteRootPathDataList(res.data);
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    useRouteRootStore().resetRouteRootPathSearchData({
        routeRootPath: "",
        pageInfo: {
            pageIndex: 1,
            pageSize: 10
        }
    });
}
</script>

<style scoped lang="less">
.searchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>